<html>
<head>
<title>Image Repository</title>
<script language="javascript">
function hideImgProp(){
  parent.document.all.frmimage.style.height = '250px';
  document.all.imgProperties.style.visibility = 'hidden';
}
function loadImgProp(img, path){
  var tds = document.all.tblContainer.getElementsByTagName("TD");
  for (var i = 0; i < tds.length; ++i){
     tds[i].style.border = 'none';
     tds[i].style.backgroundColor = '#FFFFFF';
  }
  var td = img.parentElement;
  td.style.border = '1px solid #7B9BBA';
  td.style.backgroundColor = '#334488';
  document.frmProp.filepath.value = path;
  parent.document.all.frmimage.style.height = '500px';
  document.all.imgProperties.style.visibility = 'visible';
}
function insertImage(alt, width, height){
  var frm = document.frmProp;
  var path = frm.filepath.value;
  var width = frm.width.value;
  var height = frm.height.value;
  var border = frm.border.value;
  var alt = frm.alt.value;
  var align = frm.valalign.value;
  var hspace = frm.hspace.value;
  var vspace = frm.vspace.value;

  var img = '<img src="' + path + '"';
  if (alt)
   img += ' alt="' + alt + '" title="' + alt + '"';
  if (border)
   img += ' border="' + border + '"';
  if (width)
    img += ' width="' + width + '"';
  if (height)
    img += ' height="' + height + '"';
  if (align)
    img += ' align="' + align + '"';
  if (vspace)
    img += ' vspace="' + vspace + '"';
  if (hspace)
    img += ' hspace="' + hspace + '"';
  img += '>';
  frm.filepath.value = '';
  frm.width.value = '';
  frm.height.value = '';
  frm.border.value = '';
  frm.alt.value = '';
  hideImgProp()

  if (parent.prevRangeType == 'Control'){
    var ne = parent.document.createElement(img);
    parent.prevRange(0).replaceNode(ne);
  }else{
     parent.prevRange.pasteHTML(img);
  }
  parent.popupToggle(parent.document.all.image);
  parent.document.all.ewe.focus();
}
</script>
<style>
img.image{
  cursor: pointer;
}
</style>
<link REL="StyleSheet" TYPE="text/css" HREF="popup.css">
</head>
<body style="background-color:#FFFFFF;overflow:hidden;" onClick="parent.popupClick(parent.document.all.image);" unselectable="on">
  <table id="tblContainer" border=1 cellpadding="2" cellspacing="0" unselectable="on">
    <tr height="110" unselectable="on" >
      <td style="border:1px solid #FFFFFF;" unselectable="on" width="80" valign="middle" align="center"><img src="../images/RemoveFormat.gif" width="75" height="100" onClick="loadImgProp(this, 'images/RemoveFormat.gif');" class="image"></td>
      <td style="border:1px solid #FFFFFF;" unselectable="on" width="80" valign="middle" align="center"><img src="../images/Bold.gif" width="75" height="100" onClick="loadImgProp(this,'images/Bold.gif');"  class="image"></td>
      <td style="border:1px solid #FFFFFF;" unselectable="on" width="80" valign="middle" align="center"><img src="../images/ForeColor.gif" width="75" height="100" onClick="loadImgProp(this,'images/ForeColor.gif');"  class="image"></td>
      <td style="border:1px solid #FFFFFF;" unselectable="on" width="80" valign="middle" align="center"><img src="../images/Italic.gif" width="75" height="100" onClick="loadImgProp(this,'images/Italic.gif');"  class="image"></td>
    </tr>
    <tr height="110" unselectable="on">
      <td style="border:1px solid #FFFFFF;" unselectable="on" width="80" valign="middle" align="center"><img src="../images/CreateLink.gif" width="75" height="100" onClick="loadImgProp(this,'images/CreateLink.gif');"  class="image"></td>
      <td style="border:1px solid #FFFFFF;" unselectable="on" width="80" valign="middle" align="center"><img src="../images/Superscript.gif" width="75" height="100" onClick="loadImgProp(this,'images/Superscript.gif');"  class="image"></td>
      <td style="border:1px solid #FFFFFF;" unselectable="on" width="80" valign="middle" align="center"><img src="../images/JustifyRight.gif" width="75" height="100" onClick="loadImgProp(this,'images/JustifyRight.gif');"  class="image"></td>
      <td style="border:1px solid #FFFFFF;" unselectable="on" width="80" valign="middle" align="center"><img src="../images/Copy.gif" width="75" height="100" onClick="loadImgProp(this,'images/Copy.gif');"  class="image"></td>
    </tr>
  </table>
  <div id="imgProperties" style="visibility:hidden;">
  <form name="frmProp" onSubmit="return false;" unselectable="on">
  <input type="hidden" name="filepath">
  <table width="350" border="0" cellspacing="0" cellpadding="1" unselectable="on">
    <tr unselectable="on">
      <td width="350" class="columnHeader" style="font-weight: 600;" unselectable="on" colspan="3">Image Properties - <a href="#" onClick="hideImgProp();return false;">hide</a> <hr size="1" noshad></td>
    </tr>
    <tr unselectable="on">
      <td width="15" unselectable="on">&nbsp;</td>
      <td width="135" class="columnHeader" unselectable="on">Width: </td>
      <td width="200" unselectable="on"><input type="text" size="2" maxlength="4" name="width">px</td>
    </tr>
    <tr unselectable="on">
      <td width="15" unselectable="on">&nbsp;</td>
      <td width="135" class="columnHeader" unselectable="on">Height: </td>
      <td width="200" unselectable="on"><input type="text" size="2" maxlength="4" name="height">px</td>
    </tr>
    <tr unselectable="on">
      <td width="15" unselectable="on">&nbsp;</td>
      <td width="135" class="columnHeader" unselectable="on">Border Size: </td>
      <td width="200" unselectable="on"><input type="text" size="2" maxlength="4" name="border" value="0"></td>
    </tr>
    <tr unselectable="on">
      <td width="15" unselectable="on">&nbsp;</td>
      <td width="135" class="columnHeader" unselectable="on">Alternate Text: </td>
      <td width="200" unselectable="on"><input type="text" size="20" maxlength="100" name="alt"></td>
    </tr>
    <tr unselectable="on">
      <td width="15" unselectable="on">&nbsp;</td>
      <td width="135" class="columnHeader" unselectable="on">Align: </td>
      <td width="200" unselectable="on"><select name="valalign"><option value="">Default</option><option value="bottom">Bottom</option><option value="middle">Middle</option><option value="top">Top</option><option value="left">Left</option><option value="right">Right</option></td>
    </tr>
    <tr unselectable="on">
      <td width="15" unselectable="on">&nbsp;</td>
      <td width="135" class="columnHeader" unselectable="on">Horizontal Space: </td>
      <td width="200" unselectable="on"><input type="text" size="2" maxlength="4" name="hspace">px</td>
    </tr>
    <tr unselectable="on">
      <td width="15" unselectable="on">&nbsp;</td>
      <td width="135" class="columnHeader" unselectable="on">Vertical Space: </td>
      <td width="200" unselectable="on"><input type="text" size="2" maxlength="4" name="vspace">px</td>
    </tr>
    <tr unselectable="on">
      <td width="15" unselectable="on">&nbsp;</td>
      <td width="100" class="columnHeader" unselectable="on">&nbsp;</td>
      <td width="160" unselectable="on"><input type="button" value="Insert Image" onClick="insertImage();"></td>
    </tr>
  </table>
  </form>
  </div>
</body>
</html>